<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title标题</title>
        <script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
    </head>
    <style type="text/css">
.popup{
  position: absolute;
  display:none;
  z-index:3000;
  background-color:#FFF;
  left: 15%;
  top: 10%;
  height: 80%;
  width: 70%;
  line-height:94px;
  text-align:center;
  border: 1px solid #03F;
}
.controls .reader-config-group label{
  line-height: normal;
}
</style>
    <body>
    <div id="loadingDiv" style="position:fixed;display:none;z-index:2000;top:0px;left:0px;width:100%;height:100%;background-color:rgba(255,255,0,0.5)"></div>
    <div id="scanDiv" class="popup" style="overflow-y:auto">
        <div style="float:right;line-height: normal; "><button class="stop" style="color:red; height:30px; margin:0 0;">Stop</button></div>

        <span id="text"></span>
        <div class="controls">

            <fieldset class="reader-config-group">
                <label>
                    <span>Barcode-Type</span>
                    <select name="decoder_readers">
                        <option value="code_128" selected="selected">Code 128</option>
                        <option value="code_39">Code 39</option>
                        <option value="code_39_vin">Code 39 VIN</option>
                        <option value="ean">EAN</option>
                        <option value="ean_extended">EAN-extended</option>
                        <option value="ean_8">EAN-8</option>
                        <option value="upc">UPC</option>
                        <option value="upc_e">UPC-E</option>
                        <option value="codabar">Codabar</option>
                        <option value="i2of5">Interleaved 2 of 5</option>
                        <option value="2of5">Standard 2 of 5</option>
                        <option value="code_93">Code 93</option>
                    </select>
                </label>
                <label>
                    <span>Resolution (width)</span>
                    <select name="input-stream_constraints">
                        <option value="320x240">320px</option>
                        <option selected="selected" value="640x480">640px</option>
                        <option value="800x600">800px</option>
                        <option value="1280x720">1280px</option>
                        <option value="1600x960">1600px</option>
                        <option value="1920x1080">1920px</option>
                    </select>
                </label>
                <label>
                    <span>Patch-Size</span>
                    <select name="locator_patch-size">
                        <option value="x-small">x-small</option>
                        <option value="small">small</option>
                        <option selected="selected" value="medium">medium</option>
                        <option value="large">large</option>
                        <option value="x-large">x-large</option>
                    </select>
                </label>
                <label>
                    <span>Half-Sample</span>
                    <input type="checkbox" checked="checked" name="locator_half-sample" />
                </label>
                <label>
                    <span>Workers</span>
                    <select name="numOfWorkers">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option selected="selected" value="4">4</option>
                        <option value="8">8</option>
                    </select>
                </label>
                <label>
                    <span>Camera</span>
                    <select name="input-stream_constraints" id="deviceSelection">
                    </select>
                </label>
                <label style="display: none">
                    <span>Zoom</span>
                    <select name="settings_zoom"></select>
                </label>
                <label style="display: none">
                    <span>Torch</span>
                    <input type="checkbox" name="settings_torch" />
                </label>
            </fieldset>
        </div>
        <div id="result_strip">
        </div>
        <div id="interactive" class="viewport" style="margin:auto; 0"></div>
    </div>

    <div id="cameraDiv" class="popup" style="overflow-y:auto">
        <div style="float:right;line-height: normal; "><button class="stop" style="color:red; height:30px; margin:0 0;">Stop</button></div>
        <span id="text1"></span>

        <div class="viewport" style="margin:auto; 0">
            <video id="videoPlay" muted autoplay playsinline style="float: none;"></video>
            <canvas id="photo" style="z-index:-1; position: absolute; left: 50%; display: none;"></canvas>
        </div>
    </div>

    <div id="collectionInfo">

        <div id="scanNo" style="width: 120px;text-align: center;background: #ccc;margin: 10px auto;padding: 10px;">
            <img style="margin: 0 auto; padding: 10px 0 0 0; display: block;width: 120px;">
            <label style="font-size: 10px; position: relative; display: block; min-height: 18px;"></label>
            <span style="font-size: 13px; color: #666; position: relative; display: block;">扫描订单编号</span>
        </div>

        <div id="camera" style="width: 120px;text-align: center;background: #ccc;margin: 10px auto;padding: 10px;">
            <img style="margin: 0 auto;padding: 10px 0; display: block;width: 120px;">
            <span style="font-size: 13px; color: #666;">拍照</span>
        </div>

        <div style="width: 140px; margin: 10px auto;">
            <span style="font-size: 13px; color: #666;">反馈信息</span><br>
            <textarea id="inputInfo" rows="3" style="width: 134px; font-size: 15px; margin: 5 0 0 0;"></textarea>
        </div>

        <button class="upload" style="margin:0px auto; border-radius:8px; display: block; font-size: 15px; width: 60px; height: 30px;" >提交</button>
    </div>

    <script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
    <script src="../js/quagga.js" type="text/javascript"></script>
    <script src="../js/shopee_live.js" type="text/javascript"></script>
    </body>
    <script type="text/javascript">
        let defImgBase64 = "";
        $("#scanNo img").attr('src', defImgBase64);
        $("#camera img").attr('src', defImgBase64);
        $(function(){
          var url = null;
          $(document).on('click','button',function(){
            let cls = $(this).attr("class")
            if (cls == 'upload') {
                upload();
            } else if (cls == 'stop') {
                $('#loadingDiv').css('display','none');
                $('.popup').slideUp();

                let cameraDiv = $(this).parent().parent().attr('id');
                if (cameraDiv === 'cameraDiv') {
                   let video = document.getElementById('videoPlay');
                   showImg(drawImg(video));
                   stopStream(video.srcObject);
                   stopStream(window.stream);
                }
            }
          });

          function drawImg(video) {
            const canvas = document.querySelector('#photo');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            return canvas;
          }

          function showImg(canvas) {
            $("#photo").css('margin-left', -(canvas.width >> 1));
            $("#camera img").attr('src', canvas.toDataURL());
          }

          function stopStream(stream) {
            try {
                let tracks = stream.getTracks();
                tracks.forEach(track => {
                     track.stop()
                })
            } catch (e) {
            }
          }

          function upload() {
            var noData = $("#scanNo img").attr('src');
            //if (noData === defImgBase64){
            //    alert('请扫描信息');
            //    return;
            //}
            noData = noData.substr(22);
            var imgData = $("#camera img").attr('src');
            //if (noData === defImgBase64){
            //    alert('请拍摄信息');
            //    return;
            //}
            imgData = imgData.substr(22);
            const info = $("#inputInfo").val();
            let msg = {orderSn: '2009208A55QDKG',
                imageBase64String: imgData,
                appKey: 'jushuitan.com',
                userName: 'summerquality',
                siteId: 7};
            //alert(JSON.stringify(msg));
            $.ajax({
                type: 'post',
                url: 'http://shopeechatapi.vipdata.shop/ShopeeChats/SendImageMsg2UserByOrderSn',
                headers: function(req) {
                    Origin: 'http://global.taotantan.com'
                },
                data: msg,
                success: function(data){
                    alert(data);
                },
                dataType: 'json',
                //contentType: 'application/json'
            });
          }

          $(document).on('click', '#camera', function(){
            var text = $(this).text();
            $('#text1').text('是否确定前往 '+text+' ?');
            $('#loadingDiv').css('display','block');
            $('#cameraDiv').slideDown();
            if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function'){
                let constraint = {
                        audio: false,
                        video: {
                                width: {min: 640},
                                height: {min: 480},
                                facingMode: "environment",
                                aspectRatio: {min: 1, max: 2}
                                //放在app里面需要下面配置一下
                                //permissions: {
                                //    "audio-capture": {
                                //        "description": "Required to capture audio using getUserMedia()"
                                //    },
                                //   "video-capture": {
                                //        "description": "Required to capture video using getUserMedia()"
                                //    }
                                //}
                        }
                     };
                    navigator.mediaDevices.getUserMedia(constraint).then(success)
                      .catch(failed);

                //var cameraIds = [];
                //navigator.mediaDevices.enumerateDevices().then(function(devices){
                //    for (let i = 0; i < devices.length; ++i) {
                //        if (devices[i].kind === 'videoinput') {
                //            cameraIds.push(devices[i].deviceId);
                //        }
                //    }
                //    console.log(cameraIds);
                //});
            }
          })

          function success(stream) {
            const vi = document.querySelector('#videoPlay')
            window.stream = stream;
            // 旧的浏览器可能没有srcObject
            try {
                vi.srcObject = stream;
            } catch (error) {
                // 防止在新的浏览器里使用它，应为它已经不再支持了
                vi.src = window.URL.createObjectURL(stream);
            }
          }

          function failed(error) {
            console.log(error);
          }

          $(document).on('click', '#scanNo', function(){
            var text = $(this).text();
            $('#text').text('是否确定前往 '+text+' ?');
            $('#loadingDiv').css('display','block');
            $('#scanDiv').slideDown();
            App.init();
          })
        });

    </script>
</html>
